<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>发布订单</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <style type="text/css">
    	.content .mui-input-row .mui-numbox{
    		float: none;
    	}
    	.content form .mui-input-row::after,
    	.content .mui-card-footer:before{
    		background: none;
    	}
    	.content form .mui-input-row:nth-child(3)::after{
    		height: 1px !important;
    		background: #c8c7cc;
    	}
    	.content .mui-card-header{
    		padding: 20px;
    	}
    	.content .mui-card-header .mui-media-body p{
    		color: #e53e30;
    		font-size: 1.2em;
    	}
    	.content .mui-card-content{
    		padding:10% 0;
    	}
    	.content .mui-card{
    		padding-bottom: 10%;
    	}
    	.content .mui-card-footer button{
    		width: 100%;
    		margin: 0 auto;
    	}
    	.content .mui-card-footer{
    		padding: 11px 7%;
    	}
    	.mui-input-row .mui-input-clear~.mui-icon-clear{
    		padding-top:15px;
    	}
    </style>
</head>
<body>
	
	<header class="mui-bar mui-bar-nav">
		<a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">发布订单</h1>
	</header>
	
    <div class="mui-content id content">
        
        <div class="mui-card">
			<!--页眉，放置标题-->
			<div class="mui-card-header mui-card-media">
				<img src="img/bank.png" />
				<div class="mui-media-body">
					钛余额
					<p>184.00</p>
				</div>
			</div>
			<!--内容区-->
			<div class="mui-card-content">
				
				<form class="mui-input-group" action="">
					
					<div class="mui-input-row">
						<label class="name">点击切换</label>
						<select class="mui-selected">
							<option value="1">购买钛</option>
							<option value="2">挂卖钛</option>
						</select>
					</div>
					
					<div class="mui-input-row">
						<label class="name">钛数量</label>
						<div class="mui-numbox" data-numbox-step='1' data-numbox-min='100' data-numbox-max='9999'>
							<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
							<input class="mui-input-numbox" type="number" />
							<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
						</div>
					</div>
					<div class="mui-input-row">
						<label class="name">支付密码</label>
						<input type="password" class="mui-input-clear n_name" maxlength="6" id="pay_password" placeholder="请输入支付密码">
					</div>
				</form>
				                            
			</div>
			<!--页脚，放置补充信息或支持的操作-->
			<div class="mui-card-footer">
				<button type="button" id="sub" class="mui-btn mui-btn-primary">确认</button>
			</div>
		</div>
    </div>

    
    
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
	    mui.init()
	    
	    /******		提交事件 		**********/
	    $('#sub').click(()=>{
	    	let check = true
	    	/******		捕获数据		********/
    		let [tai_num,tai_type,pay_password] = [mui('.mui-numbox').numbox().getValue(),$('.mui-selected').val(),$('#pay_password').val()]
    		var pay_patrn = /^[0-9]{6}$/
			if(!pay_patrn.test(pay_password) && check){
			    mui.toast('请输入6位数支付密码');
			    check = false;
			    return false;
			}
			if(check){
				$.ajax({
					type:"post",
					url:"",
					async:true,
					success(data){
						data = false 	//假设为true
						if(data){
							mui.alert('发布成功',()=>{
								window.location.href='market_place.html' //点击确定返回发布列表
							})
						}else{
							mui.toast('发布失败，请刷新重试')
							$('#pay_password').val('')
						}
					},
					error(err){
						mui.toast('发布失败，请刷新重试')
					}
				});
			}
	    })
    </script>
</body>
</html>
